import React, {Component} from 'react'
import InputSelect from './InputSelect'
import {FormGroupLabel} from '../FormGroupLabel'

interface InputSelectVerticalProps {
  options: any
  label?: string
  onChange: (value: any) => void
  placeholder?: string
  name: string
  isSearchable?: boolean
  isMulti?: boolean
  isDisabled?: boolean
  isLoading?: boolean
  isClearable?: boolean
  className?: string
  defaultValue?: any
  isRequired: boolean
  feedback?: string
  autoFocus?: boolean
  value?: any
  size?: 'sm' | 'lg'
  helpText?: React.ReactNode
  id?: string
  instanceId?: string
}

class InputSelectVertical extends Component<InputSelectVerticalProps> {
  render() {
    const {
      label,
      className,
      isRequired,
      feedback,
      defaultValue,
      isDisabled,
      isLoading,
      isClearable,
      isSearchable,
      options,
      placeholder,
      name,
      onChange,
      autoFocus,
      value,
      helpText,
      size,
      id,
      instanceId,
    } = this.props
    return (
      <FormGroupLabel
        feedback={feedback}
        label={label}
        isRequired={isRequired}
        helpText={helpText}
        className={className}
        id={id}>
        <InputSelect
          autoFocus={autoFocus}
          onChange={onChange}
          defaultValue={defaultValue}
          isDisabled={isDisabled}
          isLoading={isLoading}
          isClearable={isClearable}
          isSearchable={isSearchable}
          name={name}
          options={options}
          placeholder={placeholder}
          value={value}
          size={size}
          instanceId={instanceId}
        />
      </FormGroupLabel>
    )
  }
}

export default InputSelectVertical
